import { Component, ReactNode } from 'react';
import React from 'react';
import ProTable from '@ant-design/pro-table';
import { Row, Card, Col } from 'antd';
import CreateForm from '@/pages/ListTableList/components/CreateForm';
import { EditOutlined, DeleteOutlined, EyeOutlined, ScheduleOutlined } from '@ant-design/icons';
import Meta from 'antd/lib/card/Meta';
import Pagination from 'antd/es/pagination';
import URLS from '@/apis/APIUrlDefine';

interface HighPerformCardListProps<T> {
  additionOptions?: Array<{ title: string; onClick: Function }>;
  toolBarRender?: () => Array<ReactNode> | false;
  handleAdd?: (item: T) => Promise<boolean>;
  handleDelete?: (id: number) => Promise<boolean>;
  handleUpdate?: (item: T) => Promise<boolean>;
  handleChangeState?: (state: boolean) => Promise<boolean>;
  onClickUpdata?: (record: any) => any;
  openNotice?: (record: any) => any;
  customActions?: (record: any) => Array<ReactNode>;
  requestGetData?: (current: number, pageSize: number) => Promise<any>;
  dataIndexes?: any;
  profileType?: number; //0通过dataIndexes指定图，123等数字使用预设图
}

interface HighPerformCardListState<T> {
  selectedRowsState: Array<T>;
  createModalVisible: boolean;
  updateModalVisible: boolean;
  currentSelect: any;
  currentPage: number;
  total: number;
  datas: any;
}

class HighPerformCardList<T> extends Component<
  HighPerformCardListProps<T>,
  HighPerformCardListState<T>
> {
  actionRef: any;

  constructor(props: HighPerformCardListProps<T>) {
    super(props);
    this.state = {
      selectedRowsState: [],
      createModalVisible: false,
      updateModalVisible: false,
      currentSelect: {},
      currentPage: 1,
      total: 0,
      datas: [],
    };
  }
  componentDidMount() {
    this.getData(1);
  }

  public Reload(){
    this.getData(this.state.currentPage)
  }
  getData(page: number) {
    this.props.requestGetData?.(page, 12).then((res) => {

      this.setState({ total: res.total, datas: res.data });
    }).catch(e=>console.log(e));
  }
  clearData(){
    this.setState({ total: 0, datas: [] });
  }
  onChange(page: number) {
    this.setState({
      currentPage: page,
    });
    this.getData(page);
  }
  handleModalVisible(value: boolean) {
    this.setState({ createModalVisible: value });
  }
  setSelectedRows(rows: Array<any>) {}
  handleRemove(array: Array<T>) {}
  handleAdd(item: T) {
    return false;
  }
  handleUpdateModalVisible(value: boolean) {
    this.setState({ updateModalVisible: value });
  }
  handleUpdate(value: any) {
    return false;
  }
  render() {
    const datas = this.state.datas;
    return (
      <div>
        <div
          style={{
            display: 'flex',
            flexDirection: 'row',
            justifyContent: 'flex-end',
            margin: '12px 20px 12px',
          }}
        >
          {this.props.toolBarRender ? this.props.toolBarRender() : null}
        </div>
        <Row gutter={{ xxl: 16, xs: 8, xl: 8 }}>
          {datas.map((item: any, index: any) => {
            return (
              <Col
                style={{ paddingBottom: '16px' }}
                key={index}
                xxl={{ span: 4 }}
                xl={6}
                lg={8}
                md={12}
                sm={24}
              >
                <Card
                  style={{ width: '100%' }}
                  cover={
                    <div style={{ width: '100%', height: '170px' }}>
                      <img
                        style={{ margin: '5% 5%', width: '90%', height: '90%' }}
                        alt="example"
                        src={
                          this.props.profileType === 0
                            ? URLS.SERVER_PICTURE_URL + item[this.props.dataIndexes.image]
                            : this.props.profileType === 1
                            ? 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604298258232&di=50950ba045beb018f70e77e0efe1653d&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F36%2F48%2F19300001357258133412489354717.jpg'
                            : undefined
                        }
                      />
                    </div>
                  }
                  actions={
                    this.props.customActions
                      ? this.props.customActions(item)
                      : [
                          <EyeOutlined title="查看主页" key="setting" />,
                          <EditOutlined
                            title="编辑课程"
                            key="edit"
                            onClick={() => this.props.onClickUpdata?.(item)}
                          />,
                          <ScheduleOutlined
                            title="发布公告"
                            key="publish"
                            onClick={() => this.props.openNotice?.(item)}
                          />,
                          <DeleteOutlined
                            title="删除课程"
                            key="ellipsis"
                            onClick={() =>{
                              // console.log(item.id);
                              this.props.handleDelete?.(item.id).then((success) => {
                                if (success) this.getData(this.state.currentPage);
                              })
                            }
                             
                            }
                          />,
                        ]
                  }
                >
                  <Meta
                    style={{ height: '50px' }}
                    title={item[this.props.dataIndexes.title]}
                    description={
                      <p style={{ maxHeight: '13px' }}>
                        {item[this.props.dataIndexes.description]}
                      </p>
                    }
                  />
                </Card>
              </Col>
            );
          })}
        </Row>
        <div
          style={{
            width: '100%',
            display: 'flex',
            flexDirection: 'row',
            justifyContent: 'center',
          }}
        >
          <Pagination
            current={this.state.currentPage}
            pageSize={12}
            onChange={this.onChange.bind(this)}
            total={this.state.total}
          />
        </div>
        <CreateForm
          onCancel={() => this.handleModalVisible(false)}
          modalVisible={this.state.createModalVisible}
        >
          <ProTable<T, T>
            onSubmit={async (value) => {
              const success = await this.props.handleAdd?.(value);
              if (success) {
                this.handleModalVisible(false);
                if (this.actionRef) {
                  this.actionRef.reload();
                }
              }
            }}
            type="form"
            // columns={this.props.columns}
            rowSelection={{}}
          />
        </CreateForm>
        {/* <UpdateForm
          onSubmit={async (value) => {
            const success = await this.handleUpdate(value);
            if (success) {
              this.handleUpdateModalVisible(false);
              if (this.actionRef.current) {
                this.actionRef.current.reload();
              }
            }
          }}
          onCancel={() => {
            this.handleUpdateModalVisible(false);
          }}
          updateModalVisible={this.state.updateModalVisible}
          values={this.state.currentSelect}
        /> */}
      </div>
    );
  }
}

export default HighPerformCardList;
